@keyframes coin{
  0%{ background: url('@/public/coin/coin1.png');
    background-size: 100% 100%;}
  2.5%{ background: url('@/public/coin/coin2.png');
    background-size: 100% 100%;}
  5%{ background: url('@/public/coin/coin3.png');
    background-size: 100% 100%;}
  7.5%{ background: url('@/public/coin/coin4.png');
    background-size: 100% 100%;}
  10%{ background: url('@/public/coin/coin5.png');
    background-size: 100% 100%;}
  12.5%{ background: url('@/public/coin/coin6.png');
    background-size: 100% 100%;}
  15%{ background: url('@/public/coin/coin7.png');
    background-size: 100% 100%;}
  17.5%{ background: url('@/public/coin/coin8.png');
    background-size: 100% 100%;}
  20%{ background: url('@/public/coin/coin9.png');
    background-size: 100% 100%;}
  22.5%{ background: url('@/public/coin/coin10.png');
    background-size: 100% 100%;}
  25%{ background: url('@/public/coin/coin11.png');
    background-size: 100% 100%;}
  27.5%{ background: url('@/public/coin/coin12.png');
    background-size: 100% 100%;}
  30%{ background: url('@/public/coin/coin13.png');
    background-size: 100% 100%;}
  32.5%{ background: url('@/public/coin/coin14.png');
    background-size: 100% 100%;}
  35%{ background: url('@/public/coin/coin15.png');
    background-size: 100% 100%;}
  37.5%{ background: url('@/public/coin/coin16.png');
    background-size: 100% 100%;}
  40%{ background: url('@/public/coin/coin17.png');
    background-size: 100% 100%;}
  42.5%{ background: url('@/public/coin/coin18.png');
    background-size: 100% 100%;}
  45%{ background: url('@/public/coin/coin19.png');
    background-size: 100% 100%;}
  47.5%{ background: url('@/public/coin/coin20.png');
    background-size: 100% 100%;}
  50%{ background: url('@/public/coin/coin1.png');
    background-size: 100% 100%;}
  52.5%{ background: url('@/public/coin/coin2.png');
    background-size: 100% 100%;}
  55%{ background: url('@/public/coin/coin3.png');
    background-size: 100% 100%;}
  57.5%{ background: url('@/public/coin/coin4.png');
    background-size: 100% 100%;}
  60%{ background: url('@/public/coin/coin5.png');
    background-size: 100% 100%;}
  62.5%{ background: url('@/public/coin/coin6.png');
    background-size: 100% 100%;}
  65%{ background: url('@/public/coin/coin7.png');
    background-size: 100% 100%;}
  67.5%{ background:url('@/public/coin/coin8.png');
    background-size: 100% 100%;}
  70%{ background: url('@/public/coin/coin9.png');
    background-size: 100% 100%;}
  72.5%{ background: url('@/public/coin/coin10.png');
    background-size: 100% 100%;}
  75%{ background: url('@/public/coin/coin11.png');
    background-size: 100% 100%;}
  77.5%{ background: url('@/public/coin/coin12.png');
    background-size: 100% 100%;}
  80%{ background: url('@/public/coin/coin13.png');
    background-size: 100% 100%;}
  82.5%{ background: url('@/public/coin/coin14.png');
    background-size: 100% 100%;}
  85%{ background: url('@/public/coin/coin15.png');
    background-size: 100% 100%;}
  87.5%{ background: url('@/public/coin/coin16.png');
    background-size: 100% 100%;}
  90%{ background: url('@/public/coin/coin17.png');
    background-size: 100% 100%;}
  92.5%{ background: url('@/public/coin/coin18.png');
    background-size: 100% 100%;}
  95%{ background: url('@/public/coin/coin19.png');
    background-size: 100% 100%;}
  97.5%{ background:url('@/public/coin/coin20.png');
    background-size: 100% 100%;}
  100%{ background: url('@/public/coin/coin1.png');
    background-size: 100% 100%;}
}



#app {
  .bg {
    background-image: url('@/public/img/eevee_bg.jpg');
    opacity: 0.15;
    position: fixed;
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 100%;
    z-index: -2;
    top: 0;
    left: 0;
  }

  .van-picker__confirm {
    color: #ff3c28;
    font-weight: 700;
  }


  .van-radio__icon--checked .van-icon {
    background: #ee0a24;
    border-color:#ee0a24;
  }

  .top-search {
    background: #fff;
    position: fixed;
    width:100%;
    z-index: 55
  }


  .err-color {
    color: #ee0a24;
  }


  .normal-color {
    color: #65c89b;
  }



  .flex-center {
    text-align: center;
    display: flex;
    justify-content: center!important;
  }


}


#layout {
  .app-nav-bar {
    position: fixed!important;
    width: 100%;
    top: 0;
    z-index: 99!important;
    background: rgb(255, 60, 40);
    .van-dropdown-item {
      top: 40px!important;
    }

    .van-nav-bar__content {
      height: 40px;
    }

    .van-icon {
      color: #fff!important;
    }

    .van-nav-bar__text {
      color: #fff!important;
    }

    .van-nav-bar__title {
      color: #fff!important;
    }

    .store-dropdown {
      height: 40px;
      .van-dropdown-menu__bar {
        .van-dropdown-menu__item {
          padding: 0 5px;
        }

        background: rgb(255, 60, 40);
        height: 40px;
        .van-dropdown-menu__title--active::after {
          border-color:transparent transparent #dcdee0 #dcdee0!important;
        }



        .van-ellipsis {
          color: #fff;
        }
      }
    }
  }

  .app-bottom {
    z-index: 5!important;
    height: 60px!important;
    padding-bottom: 10px!important;
  }

  .van-info {
    right: -4px;
    top: -4px;
    font-size: 10px;
    padding: 1px 3px;
  }

  .van-tree-select {
    .van-sidebar-item__text {
      position: unset;
    }

    .van-info {
      right: 14px;
      top: 15px;
    }

    .van-tree-select__content {
      color: #333;
    }
  }
}

